<template>
  <div ref="charts" :style="{width: '600px', height: '600px'}"></div>
</template>
<script>
const option = {
  backgroundColor: "white",

  title: {
    text: "您的bug提交数据",
    left: "center",
    top: 20,
    textStyle: {
      color: "#ccc"
    }
  },

  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },

  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: "提交来源",
      type: "pie",
      radius: "55%",
      center: ["50%", "50%"],
      data: [
        { value: 335, name: "bug1" },
        { value: 310, name: "bug1" },
        { value: 274, name: "bug1" },
        { value: 235, name: "bug1" },
        { value: 400, name: "bug1" }
      ].sort(function(a, b) {
        return a.value - b.value;
      }),
      roseType: "radius",
      label: {
        normal: {
          textStyle: {
            color: "rgba(255, 255, 255)"
          }
        }
      },
      labelLine: {
        normal: {
          lineStyle: {
            color: "rgba(255, 255, 255)"
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        }
      },
      itemStyle: {
        normal: {
          color: "#c23531",
          shadowBlur: 100,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      },

      animationType: "scale",
      animationEasing: "elasticOut",
      animationDelay: function(idx) {
        return Math.random() * 200;
      }
    }
  ]
};
export default {
  name: "charts",
  data() {
    return {
      msg: "hello"
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let myChart = this.$echarts.init(this.$refs.charts);
      myChart.setOption(option);
    }
  }
};
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
</style>
